<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>我要付款</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <link href="css/mui.min.css" rel="stylesheet" type="text/css" />
    <link href="css/mui.picker.css" rel="stylesheet" type="text/css" />
    <link href="css/mui.dtpicker.css" rel="stylesheet" type="text/css" />
    <link href="css/base.css" rel="stylesheet" type="text/css" />
    <link href="css/button.css" rel="stylesheet" type="text/css" />
    <link href="css/icon.css" rel="stylesheet" type="text/css" />
    <link href="css/pay.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="header-bar">
        <h4>房源信息</h4>
        <div class="title-tip"></div>
    </div>
    <div class="form-body">
        <!-- <div class="form-item">
            <span class="item-title">详细地址</span>
            <a class="item-action address" href="javascript:;">
                <span class="action-value">武侯区，科华北路，某小...</span>
                <i class="icon icon-down"></i>
            </a>
        </div> -->
        <div class="form-item">
            <span class="item-title">入住房源</span>
            <a class="item-action resource" href="javascript:;">
                <span class="action-value"></span>
                <i class="icon icon-down"></i>
            </a>
        </div>
        <!-- <div class="form-item">
            <span class="item-title">房源费用</span>
            <a class="item-action" href="javascript:;">
                <span class="action-value">&yen;1300/月</span>
                <i class="icon icon-spacing"></i>
            </a>
        </div> -->
        <div class="form-item">
            <span class="item-title">入住人数</span>
            <a class="item-action" href="javascript:;">
                <input type="text" name="person" class="control-text" placeholder="请输入入住人数">
                <i class="icon icon-down"></i>
            </a>
        </div>
        <div class="form-item">
            <span class="item-title">分摊费</span>
            <a class="item-action" href="javascript:;">
                <input type="text" name="fee" class="control-text" placeholder="请输入分摊费">
                <i class="icon icon-down"></i>
            </a>
        </div>
        <div class="form-item">
            <span class="item-title">入住时间</span>
            <a class="item-action checkin-time" href="javascript:;">
                <span class="action-value">2017-01-01</span>
                <i class="icon icon-down"></i>
            </a>
        </div>
        <!-- <div class="form-item">
            <span class="item-title">退租时间</span>
            <a class="item-action checkout-time ct" href="javascript:;">
                <span class="action-value">2018-01-01</span>
                <i class="icon icon-down"></i>
            </a>
        </div> -->
        <div class="form-item">
            <span class="item-title">付款优惠</span>
            <a class="item-action pay-expense pe" href="javascript:;">
                <span class="action-value"></span>
                <i class="icon icon-down"></i>
            </a>
        </div>
        <!--<div class="form-item last">-->
            <!--<span class="item-title">费用总额</span>-->
            <!--<a class="item-action total-money" href="javascript:;">-->
                <!--<span class="action-value"></span>-->
                <!--<i class="icon icon-spacing"></i>-->
            <!--</a>-->
        <!--</div>-->
    </div>
    <a href="javascript:;" class="btn btn-submit sbm yellow">立即付款</a>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
    <script src="js/template.js" type="text/javascript"></script>
    <script src="js/mui.min.js" type="text/javascript"></script>
    <script src="js/mui.picker.js" type="text/javascript"></script>
    <script src="js/mui.dtpicker.js" type="text/javascript"></script>
    <script src="js/dialog.js" type="text/javascript"></script>
    <script src="js/base.js" type="text/javascript"></script>
    <script type="text/javascript">
        var year = [];
        var month = [];
        var day = [];
        var date = (new Date()).getFullYear();
        for (var i = 1900; i <= date; i++) {
            year.push({
                value: i,
                text: i + '年'
            });
        }

        for (var i = 1; i <= 12; i++) {
            month.push({
                value: i,
                text: i + '月'
            });
        }

        for (var i = 1; i <= 31; i++) {
            day.push({
                value: i,
                text: i + '日'
            });
        }

        var dtpicker = new mui.DtPicker({
            type: "date",
            title: '',
            bottom: true,
            beginDate: new Date(1900, 01, 01),
            endDate: new Date(date, 12, 31),
            customData: {
                y: year,
                m: month,
                d: day
            }
        });
        $(function() {
            bee.wxConfig(function() {
                bee.hideAllNonBaseMenuItem();
            }, function(res) {});

            bee.request({
                url: '/Index/Order/get_info',
                data: {
                    skuid: bee.getQueryString('housing_id'),
                    id: bee.getQueryString('id')
                },
                success: function(res) {
                    bee.template('profit', res.info, true);
                    $('.total-money .action-value').text('￥' + res.info.total_money);
                    $('.room').text(res.info.room_number);
                    var str = res.info.building + '栋，' + res.info.unit + '单元，' + res.info.floor + '层，' + res.info.room_number + '号房间';
                    $('.resource .action-value').text(str);

                    $('body').on('click', '.pay-dialog tbody tr', function() {
                        $(this).addClass('active');
                        $(this).siblings('tr').removeClass('active');
                    });
                }
            });

            $('body').on('click', '.close', function() {
                $('.dialog').dialog('hide');
            });

            $('body').on('click', '.pay-dialog .ok', function() {
                var method = $('.pay-dialog tr.active td').eq(0).text();
                var money = $('.pay-dialog tr.active td').eq(1).text();
                $('.pay-expense .action-value').text(money + '/月，' + method);
                $('.dialog').dialog('hide');
            });

            $('body').on('click', '.resource-dialog .ok', function() {
                var building = $('.resource-dialog [name="building"]').val();
                var unit = $('.resource-dialog [name="unit"]').val();
                var floor = $('.resource-dialog [name="floor"]').val();
                var door = $('.resource-dialog [name="door"]').val();
                var room = $('.resource-dialog .room').text();
                var str = building + '栋，' + unit + '单元，' + floor + '层，' + door + '号，房间' + room;
                $('.resource .action-value').text(str);
                $('.dialog').dialog('hide');
            });

            $('body').on('click', '.address', function() {
                $('.address-dialog').dialog('show');
            });

            // $('body').on('click', '.resource', function() {
            //     $('.resource-dialog').dialog('show');
            // });

            $('body').on('click', '.pe', function() {
                $('.pay-dialog').dialog('show');
            });

            $('body').on('click', '.checkin-time, .ct', function() {
                var $this = $(this);
                dtpicker.show(function(e) {
                    $this.find('.action-value').text(e.value);
                })
            });

            $('body').on('click', '.sbm', function() {
                var data = {};
                data.skuid = bee.getQueryString('housing_id');
                data.id = bee.getQueryString('id');
                data.building = $('.resource-dialog [name="building"]').val();
                data.unit = $('.resource-dialog [name="unit"]').val();
                data.floor = $('.resource-dialog [name="floor"]').val();
                data.start_time = $('.checkin-time .action-value').text();
                data.payment_type = $('.pay-dialog tr.active').index('.pay-dialog tbody tr') + 1;
                bee.request({
                    url: '/Index/Order/add_order',
                    data: data,
                    success: function(res) {
                        bee.open('payment.html', {
                            housing_id: bee.getQueryString('housing_id'),
                            id: bee.getQueryString('id')
                        });
                    }
                });
            });
        });
    </script>
    <div class="dialog address-dialog">
        <div class="dialog-body">
            <div class="layer-item">
                <ul class="left-side-menu gray">
                    <li><a class="active" href="javascript:;">附近</a></li>
                    <li><a href="javascript:;">附近</a></li>
                    <li><a href="javascript:;">附近</a></li>
                    <li><a href="javascript:;">附近</a></li>
                    <li><a href="javascript:;">附近</a></li>
                    <li><a href="javascript:;">附近</a></li>
                    <li><a href="javascript:;">附近</a></li>
                    <li><a href="javascript:;">附近</a></li>
                    <li><a href="javascript:;">附近</a></li>
                    <li><a href="javascript:;">附近</a></li>
                    <li><a href="javascript:;">附近</a></li>
                    <li><a href="javascript:;">附近</a></li>
                </ul>
                <ul class="right-side-menu">
                    <li><a class="active" href="javascript:;">1km</a></li>
                    <li><a href="javascript:;">2km</a></li>
                    <li><a href="javascript:;">3km</a></li>
                    <li><a href="javascript:;">4km</a></li>
                    <li><a href="javascript:;">1km</a></li>
                    <li><a href="javascript:;">2km</a></li>
                    <li><a href="javascript:;">3km</a></li>
                    <li><a href="javascript:;">4km</a></li>
                    <li><a href="javascript:;">1km</a></li>
                    <li><a href="javascript:;">2km</a></li>
                    <li><a href="javascript:;">3km</a></li>
                    <li><a href="javascript:;">4km</a></li>
                </ul>
            </div>
        </div>
        <div class="dialog-foot">
            <a href="javascript:;" class="font-blue ok">确定</a>
            <a href="javascript:;" class="font-red close" style="margin-left: 40%;">关闭</a>
        </div>
    </div>
    <div class="dialog resource-dialog">
        <div class="dialog-body">
            <ul>
                <li>基本信息
                    <p>
                        <input type="text" name="building" />栋
                        <input type="text" name="unit" />单元
                        <input type="text" name="floor" />楼层
                        <input type="text" name="door" class="last" />
                    </p>
                </li>
                <li>房间号
                    <p class="room"></p>
                </li>
            </ul>
        </div>
        <div class="dialog-foot">
            <a href="javascript:;" class="font-blue ok">确定</a>
            <a href="javascript:;" class="font-red close" style="margin-left: 40%;">关闭</a>
        </div>
    </div>
    <div class="dialog pay-dialog">
        <div class="dialog-title">房租年付更优惠</div>
        <div class="dialog-body">
            <table>
                <thead>
                    <tr class="even">
                        <th>方式</th>
                        <th>租金（元/月）</th>
                        <th>押金（元）</th>
                        <th>总计（元/年）</th>
                    </tr>
                </thead>
                <tbody id="profit-dom">

                </tbody>
                <script id="profit" type="text/html">
                    <tr class="active">
                        <td>月付</td>
                        <td>&yen;{{ month_pay.month }}</td>
                        <td>&yen;{{ month_pay.deposit_money }}</td>
                        <td>&yen;{{ month_pay.year }}</td>
                    </tr>
                    <tr class="even">
                        <td>季付</td>
                        <td>&yen;{{ season_pay.month }}</td>
                        <td>&yen;{{ season_pay.deposit_money }}</td>
                        <td>&yen;{{ season_pay.year }}</td>
                    </tr>
                    <tr>
                        <td>年付</td>
                        <td>&yen;{{ year_pay.month }}</td>
                        <td>&yen;{{ year_pay.deposit_money }}</td>
                        <td>&yen;{{ year_pay.year }}</td>
                    </tr>
                </script>
            </table>
        </div>
        <div class="dialog-foot">
            <a href="javascript:;" class="font-blue ok">确定</a>
            <a href="javascript:;" class="font-red close" style="margin-left: 40%;">关闭</a>
        </div>
    </div>
</body>

</html>
